<template>
  <div :style="styleObj">
    <component :is="value.setup.showtype" :value="value" />
  </div>
</template>
<script>
export default ({
  name: 'WidgetBorder',
  components: {},
  props: {
    value: Object,
    ispreview: Boolean,
    widgetIndex: {
      type: Number,
      default: 0
    } // 当前组件，在工作区变量widgetInWorkbench中的索引
  },
  data() {
    return {
      optionsStyle: {} // 样式
    }
  },
  computed: {
    styleObj() {
      return {
        position: this.ispreview ? 'absolute' : 'static',
        width: this.optionsStyle.width + 'px',
        height: this.optionsStyle.height + 'px',
        left: this.optionsStyle.left + 'px',
        top: this.optionsStyle.top + 'px'
      }
    }
  },
  watch: {
    value: {
      handler(val) {
        this.optionsStyle = val.position
        this.optionsData = val.data
        this.optionsCollapse = val.collapse
        this.optionsSetup = val.setup
      },
      deep: true,
      immediate: true
    }
  }
})
</script>
<style scoped lang="scss">
</style>
